<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ol id="ol">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ol>

    <div id="div"></div>

    <table id="table">
      aaa
      <tr>
        <td>Test</td>
      </tr>
    </table>

    <script>
      ol.before("before"); // 元素前面添加
      ol.after("after"); // 元素后面添加

      let liFirst = document.createElement("li");
      liFirst.innerHTML = "prepend";
      ol.prepend(liFirst); // 元素开头添加

      let liLast = document.createElement("li");
      liLast.innerHTML = "append";
      ol.append(liLast); // 元素末尾添加

      // insertAdjacentHTML(position, text): 将字符串转换成 html，并且插入指定位置。对于现有元素不会解析，避免了额外的序列化步骤，使其比直接使用 innerHTML 操作更快
      div.insertAdjacentHTML("beforebegin", "<p>beforebegin</p>"); // beforebegin: 元素自身的前面
      div.insertAdjacentHTML("afterbegin", "<p>afterbegin</p>"); // afterbegin: 插入元素内部的第一个子节点之前

      div.append("middle");
      div.insertAdjacentHTML("beforeend", "<p>beforeend</p>"); // beforeend: 插入元素内部的最后一个子节点之后
      div.insertAdjacentHTML("afterend", "<p>afterend</p>"); // afterend: 元素自身的后面

      // 除了 insertAdjacentHTML，还有 2 个类似的（insertAdjacentText、insertAdjacentElement）
      // insertAdjacentText(position, text): 将字符串转换成文本，并且插入指定位置
      // insertAdjacentElement(position, text): 将字符串转换为元素，插入指定位置

      // 移除元素
      ol.remove();

      // ** 克隆节点：cloneNode(deep)，为 true 则克隆子节点
      const newDiv = div.cloneNode(true);
      div.insertAdjacentHTML("afterend", "<hr />");
      document.body.append(newDiv);

      // 文档片段（DocumentFragment）
      // 文档片段是一个轻量级的文档对象，包含一组节点，可以用来存储 DOM 结构，操作时不会引起页面的重绘和回流
      document.body.insertAdjacentHTML("beforeend", '<ul id="ul"></ul>');

      function getListContent() {
        let fragment = new DocumentFragment();

        for (let i = 0; i < 3; i++) {
          let li = document.createElement("li");
          li.innerHTML = i;
          fragment.appendChild(li);
        }

        return fragment;
      }

      ul.append(getListContent());
    </script>
  </body>
</html>
